<!DOCTYPE html>
<html>
<head>
    <title>Fresnel Biprism Diagram</title>
    <style>
        body { margin: 20px; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; }
        canvas { border: 1px solid #ccc; background-color: #ffffff; }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style and general settings
    const colors = {
        prism: '#E0E0E0',
        lines: '#000000',
        text: '#000000'
    };
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = colors.lines;

    // --- Helper function to draw lines with arrowheads ---
    function drawArrow(x1, y1, x2, y2, arrowSize = 8) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        const angle = Math.atan2(y2 - y1, x2 - x1);
        ctx.save();
        ctx.translate(x2, y2);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-arrowSize, -arrowSize / 2.5);
        ctx.moveTo(0, 0);
        ctx.lineTo(-arrowSize, arrowSize / 2.5);
        ctx.stroke();
        ctx.restore();
    }
    
    // --- Draw Prism ---
    const yCenter = canvas.height / 2;
    const prism = {
        xLeft: 200, 
        xApex: 230, 
        xRightEdge: 260,
        halfHeight: 100 
    };

    ctx.fillStyle = colors.prism;
    ctx.beginPath();
    ctx.moveTo(prism.xLeft, yCenter - prism.halfHeight);
    ctx.lineTo(prism.xRightEdge, yCenter - prism.halfHeight);
    ctx.lineTo(prism.xApex, yCenter);
    ctx.lineTo(prism.xRightEdge, yCenter + prism.halfHeight);
    ctx.lineTo(prism.xLeft, yCenter + prism.halfHeight);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    // --- Draw Angle α ---
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillStyle = colors.text;
    ctx.fillText('α', prism.xApex + 8, yCenter + 5);
    
    const arcRadius = 30;
    // The crop in the prompt shows the arc on the top side.
    const angleStart = Math.atan2((yCenter - prism.halfHeight) - yCenter, prism.xRightEdge - prism.xApex);
    const angleEnd = 0; // Horizontal axis
    ctx.beginPath();
    ctx.arc(prism.xApex, yCenter, arcRadius, angleStart, angleEnd);
    ctx.stroke();

    // --- Draw Rays ---
    const xStart = 50;
    const xEnd = canvas.width - 50;
    
    // Use five incident rays to clearly show the two resulting beams
    const incidentRaysY = [
        yCenter - 75,
        yCenter - 35,
        yCenter,
        yCenter + 35,
        yCenter + 75
    ];

    // Find exit points on the left face of the prism for drawing
    const exitPoints = incidentRaysY.map(y => ({
        x: (y === yCenter) ? prism.xApex : prism.xLeft,
        y: y
    }));

    // Draw incident rays
    for (const pt of exitPoints) {
        drawArrow(xStart, pt.y, pt.x, pt.y);
    }
    
    // Draw outgoing rays to replicate the visual effect
    // Beam from the top half, deflected down
    drawArrow(exitPoints[0].x, exitPoints[0].y, xEnd, yCenter + 20);
    drawArrow(exitPoints[1].x, exitPoints[1].y, xEnd, yCenter + 90);
    drawArrow(exitPoints[2].x, exitPoints[2].y, xEnd, yCenter + 140); // Top part of split central ray

    // Beam from the bottom half, deflected up
    drawArrow(exitPoints[2].x, exitPoints[2].y, xEnd, yCenter - 140); // Bottom part of split central ray
    drawArrow(exitPoints[3].x, exitPoints[3].y, xEnd, yCenter - 90);
    drawArrow(exitPoints[4].x, exitPoints[4].y, xEnd, yCenter - 20);

</script>
</body>
</html>